<template>
    <!-- 搜索表单区域 -->
    <form class="search-form" action="#" method="post">
        <input type="text" placeholder="姓名" v-model="searchEmp.name" />

        <select v-model="searchEmp.gender">
            <option value="">性别</option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>

        <select v-model="searchEmp.job">
            <option value="">职位</option>
            <option value="1">班主任</option>
            <option value="2">讲师</option>
            <option value="3">学工主管</option>
            <option value="4">教研主管</option>
            <option value="5">咨询师</option>
        </select>

        <button type="button" @click="search">查询</button>
        <button type="button" class="clear" @click="clear">清空</button>
    </form>
    <br />
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>头像</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="(emp, index) in empList" :key="emp.id">
                <td>{{ emp.id }}</td>
                <td>{{ emp.name }}</td>
                <td>{{ emp.gender == 1 ? "男" : "女" }}</td>
                <td><img :src="emp.image" class="avatar" /></td>
                <td>
                    <span v-if="emp.job == 1">班主任</span>
                    <span v-else-if="emp.job == 2">讲师</span>
                    <span v-else-if="emp.job == 3">学工主管</span>
                    <span v-else-if="emp.job == 4">教研主管</span>
                    <span v-else-if="emp.job == 5">咨询师</span>
                    <span v-else>其他</span>
                </td>
                <td>{{ emp.entrydate }}</td>
                <td>{{ emp.updatetime }}</td>
                <td class="btn-group">
                    <button class="edit">编辑</button>
                    <button class="delete">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<style>
/* 搜索表单区域 */
.search-form {
    display: flex;
    align-items: center;
    padding: 20px;
}

/* 表单控件样式 */
.search-form input[type="text"],
.search-form select {
    margin-right: 10px;
    padding: 10px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 26%;
}

/* 按钮样式 */
.search-form button {
    padding: 10px 15px;
    margin-left: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 清空按钮样式 */
.search-form button.clear {
    background-color: #6c757d;
}

.table {
    min-width: 100%;
    border-collapse: collapse;
}

/* 设置表格单元格边框 */
.table td,
.table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.avatar {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}
</style>
<script setup>
import { ref, onMounted } from "vue"
import axios from "axios"
//搜索条件封装数据
let searchEmp = ref({
    name: "",
    gender: "",
    job: "",
});
//员工列表数据
let empList = ref([])
let search = () => {
    let url = `https://web-server.itheima.net/emps/list`;
    axios
        .get(url, { params: searchEmp.value })
        .then((result) => {
            //result.data = > {code, msg, data}
            empList.value = result.data.data;
            console.log(empList.value);
        })
        .catch((err) => { });
};

let clear = () => {
    // 清空表单内容
    searchEmp.value = { name: "", gender: "", job: "" };
    search();
};
onMounted(() => {
    search();
});
</script>
